diff options
Diffstat (limited to 'src/app/article/all/[pageId]/page.tsx')
-rw-r--r-- | src/app/article/all/[pageId]/page.tsx | 122 |
1 files changed, 7 insertions, 115 deletions
diff --git a/src/app/article/all/[pageId]/page.tsx b/src/app/article/all/[pageId]/page.tsx index 622edbb..2b9685c 100644 --- a/src/app/article/all/[pageId]/page.tsx +++ b/src/app/article/all/[pageId]/page.tsx @@ -1,8 +1,9 @@ -import Link from "next/link"; import { ArticleLoader } from "../../../../util/articleLoader"; import dateformat from "dateformat"; -import { createPagenation } from "../../../../util/pagenation"; import { ArticleListElement } from "../../_components/articleListElement"; +import { PPV } from "../../../../util/consts"; +import { chunk } from "../../../../util/arrayChunk"; +import { pagenationElement } from "../../_components/pagenationElement"; dateformat.i18n.dayNames = [ '日', '月', '火', '水', '木', '金', '土', '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日' @@ -26,119 +27,21 @@ export default async function Page(context: PageType) { const displayData = chunkdData[pageId - 1]; return ( <div className="p-1 gap-16"> - {pagenationElement(pageId, chunkdData.length)} + {pagenationElement(pageId, chunkdData.length, getHrefBuilder)} <div className="text-right">全:{loadedData.articles.length}件</div> {ArticleListElement(displayData, loadedData.categoryTag)} - {pagenationElement(pageId, chunkdData.length)} + {pagenationElement(pageId, chunkdData.length, getHrefBuilder)} </div> ); } -function pagenationElement(now: number, max: number) { - const pagenationData = createPagenation({ now: now, max: max, between: 2 }); - const liElements: JSX.Element[] = []; - for (const v of pagenationData) { - if (v.type == "back") { - if (v.link == null) { - liElements.push( - <li key={v.key}> - <span className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> - <span className="sr-only">Previous</span> - <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"> - <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" /> - </svg> - </span> - </li> - ); - } else { - liElements.push( - <li key={v.key}> - <Link href={`/article/all/page-${v.link}`} className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> - <span className="sr-only">Previous</span> - <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"> - <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" /> - </svg> - </Link> - </li> - ); - } - } else if (v.type == "next") { - if (v.link == null) { - liElements.push( - <li key={v.key}> - <span className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> - <span className="sr-only">Next</span> - <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"> - <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" /> - </svg> - </span> - </li> - ); - } else { - liElements.push( - <li key={v.key}> - <Link href={`/article/all/page-${v.link}`} className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> - <span className="sr-only">Next</span> - <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"> - <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" /> - </svg> - </Link> - </li> - ); - } - } else if (v.type == "num") { - if (v.link == null) { - if (v.num == now) { - liElements.push( - <li key={v.key}> - <span - className="z-10 flex items-center justify-center px-4 h-10 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white" - >{v.num}</span> - </li> - ); - } else { - liElements.push( - <li key={v.key}> - <span - className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" - >{v.num}</span> - </li> - ); - } - } else { - liElements.push( - <li key={v.key}> - <Link - href={`/article/all/page-${v.link}`} - className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" - >{v.num}</Link> - </li> - ); - } - } else if (v.type == "sp") { - <li key={v.key}> - <span - className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" - >...</span> - </li> - } - } - return ( - <nav className="flex justify-center pt-10"> - <ul className="flex items-center -space-x-px h-10 text-base"> - {liElements} - </ul> - </nav> - ); +function getHrefBuilder(page: number): string { + return `/article/all/page-${page}`; } function getPageIdNumber(pageIdStr: string) { const m = pageIdStr.match(/page-(\d+)/)!; const id = Number(m[1]); return id; } -const PPV = Number(process.env["AKIBA_SOUKEN_AR_ITEM_PPV"] ?? "100"); -if (!Number.isInteger(PPV)) { - throw new Error(`AKIBA_SOUKEN_AR_ITEM_PPVに整数をセットして下さい`); -} //export const dynamicParams = true; export async function generateStaticParams() { const loadedData = await ArticleLoader.instance.loadData(); @@ -147,14 +50,3 @@ export async function generateStaticParams() { return { pageId: `page-${index + 1}`, data: data }; }); } - -function chunk<T = any>(list: T[], len: number) { - if (len <= 0) { - throw new Error(); - } - const result: T[][] = []; - for (let i = 0; i < list.length; i += len) { - result.push(list.slice(i, i + len)); - } - return result; -}
\ No newline at end of file |